<template>
  <el-dialog class="pick-dialog" title="售后订单" append-to-body :visible.sync="dialogVisible" :close-on-click-modal="false" width="1000px">
    <div class="form-box" v-loading="loading">
      
      <div class="sale-info flex fbt" >
        <div>
          <el-descriptions :labelStyle="{
            width:'100px'

          }" title="售后商品" labelClassName="label-txt" border :column='1'>
              <el-descriptions-item label="游戏名称">{{ saleOrder.gameName }}</el-descriptions-item>
              <el-descriptions-item label="游戏账号">{{ saleOrder.accountNumber }}</el-descriptions-item>
              <el-descriptions-item label="区服" >{{ saleOrder.qufu }}</el-descriptions-item>
              <el-descriptions-item label="商品编号">{{ saleOrder.goodsId }}</el-descriptions-item>
              <el-descriptions-item label="平台售价">{{ saleOrder.platformAmount }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div>
          <el-descriptions :labelStyle="{
            width:'100px'

          }" title="交易信息" labelClassName="label-txt" border :column='1'>
              <el-descriptions-item label="供货商">{{ saleOrder.supplyTenantName }}</el-descriptions-item>
              <el-descriptions-item label="买家名称">{{ saleOrder.saleChannel }}</el-descriptions-item>
              <el-descriptions-item label="商品价格">{{ saleOrder.platformAmount }}</el-descriptions-item>
              <!-- <el-descriptions-item label="优惠后金额" >{{ saleOrder.saleAmount }}</el-descriptions-item>
              <el-descriptions-item label="折扣比例">{{ !saleOrder.saleDiscount||saleOrder.saleDiscount=='0.0'?10:saleOrder.saleDiscount }}</el-descriptions-item> -->
              <el-descriptions-item label="实付金额">{{ saleOrder.actualAmount }}</el-descriptions-item>
              <el-descriptions-item label="支付状态" >{{commonMaps.buyerPayState[saleOrder.salePay]  }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- <div>
          <el-descriptions :labelStyle="{
            width:'110px'
          }" title="卖家信息" labelClassName="label-txt" border :column='1'>
              <el-descriptions-item label="卖家名称">{{ saleOrder.supplyChannel }}</el-descriptions-item>
              <el-descriptions-item label="供货原价">{{saleOrder.supplyPlatformAmount}}</el-descriptions-item>
              <el-descriptions-item label="协商后供货价">{{saleOrder.supplyAmount}}</el-descriptions-item>
              <el-descriptions-item label="折扣比例">{{ !saleOrder.supplyDiscount||saleOrder.supplyDiscount=='0.0'?10:saleOrder.supplyDiscount }}</el-descriptions-item>
              <el-descriptions-item label="结算金额" >{{ saleOrder.supplyDiscountAmount }}</el-descriptions-item>
              <el-descriptions-item label="平台佣金">{{ Math.round((saleOrder.supplyAmount - saleOrder.supplyDiscountAmount)*100)/100 }}</el-descriptions-item>
              <el-descriptions-item label="结算状态">
                <el-tag :type="commonMaps. sellerPayState[saleOrder.supplySettlementState].type">{{
                  commonMaps. sellerPayState[saleOrder.supplySettlementState].label || commonMaps. sellerPayState["1"].label
                }}</el-tag>
               </el-descriptions-item>
              <el-descriptions-item label="发货状态">{{commonMaps.sendStateMap[saleOrder.sendState]  }}</el-descriptions-item>
          </el-descriptions>
        </div> -->
      </div>
      <div style="margin-top:15px">
        <el-descriptions title="售后信息" labelClassName="label-txt" border :column='3'>
            <el-descriptions-item label="售后编号">{{ info.no }}</el-descriptions-item>
            <el-descriptions-item label="申请人">{{ info.applicantName }}</el-descriptions-item>
            <el-descriptions-item label="申请时间" >{{ info.applicantTime }}</el-descriptions-item>
            <el-descriptions-item label="退款类型">{{ commonMaps.afterTypeMap[info.afterType]}}</el-descriptions-item>
            <el-descriptions-item label="退款金额">{{ info.afterAmount }}</el-descriptions-item>
            <el-descriptions-item label="退款原因" >{{ info.afterReasonsName }}</el-descriptions-item>
            <el-descriptions-item label="退款说明" :span="3">
              {{ info.afterRemark }}
            </el-descriptions-item>
            <el-descriptions-item label="售后截图" :span="3">
              <div v-if="buyerImgs&&buyerImgs.length">
                <el-image style="width:80px;height:80px; margin-right:10px;margin-bottom:10px" :preview-src-list="buyerImgs" preview v-for="(img,i) in buyerImgs" :key="i" :src="img"></el-image>
              </div>
            </el-descriptions-item>
        </el-descriptions>
      </div>
      
      <div style="margin-top:15px">
          <el-descriptions :labelStyle="{
            width:'110px'
          }" title="客服补充资料" labelClassName="label-txt" border :column='3'>
              <el-descriptions-item label="售后原因">{{info.realReasonsName }}</el-descriptions-item>
              <el-descriptions-item label="退款金额">{{info.afterAmount}}</el-descriptions-item>
              <!-- <el-descriptions-item label="卖家应付">{{info.sellerPayAmount}}</el-descriptions-item> -->
              <el-descriptions-item label="补充描述" :span="3">{{ info.description }}</el-descriptions-item>
              <el-descriptions-item label="图片" :span="3">
                <div v-if="kefuImgs&&kefuImgs.length">
                  <el-image style="width:80px;height:80px; margin-right:10px;margin-bottom:10px" :preview-src-list="kefuImgs" preview v-for="(img,i) in kefuImgs" :key="i" :src="img"></el-image>
                </div>
              </el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- <div style="margin-top:15px">
          <el-descriptions :labelStyle="{
            width:'110px'
          }" title="售后打款信息" labelClassName="label-txt" border :column='3'>
              <el-descriptions-item label="打款状态">{{  commonMaps.afterOrderPayStateTenant[info.remitState||1]}}</el-descriptions-item>
              <el-descriptions-item label="打款人">{{info.remitName}}</el-descriptions-item>
              <el-descriptions-item label="打款时间">{{info.remitTime}}</el-descriptions-item>
              <el-descriptions-item label="打款备注" :span="3">{{info.remitRemark}}</el-descriptions-item>
              <el-descriptions-item label="支付截图" :span="3">
                <div v-if="dakuanImgs&&dakuanImgs.length">
                  <el-image style="width:80px;height:80px; margin-right:10px;margin-bottom:10px" :preview-src-list="dakuanImgs" preview v-for="(img,i) in dakuanImgs" :key="i" :src="img"></el-image>

                </div>
              </el-descriptions-item>
              
          </el-descriptions>
        </div> -->
    </div>
  </el-dialog>
</template>

<script>
import orderAfterApi from '@/api/pickUp/afterSale.js'
import orderApi from '@/api/pickUp/order.js'
export default {
  name: "afterOrderView",
  data() {
    var priceRule = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入应付金额'));
        }else if (!this.priceReg.test(value)) {
            callback(new Error('请输入正确的金额'));
          }else {
          callback();
        }
      };
    return {
      dialogVisible: false,
      loading: false,
      info: "",
      infoArr: [],
      userInfo: {},//当前登录人信息
      afterReasons:[],
      afterReasonsMap:{},
      buyerImgs:[],
      ruleForm: {
        id: "",
        status: "",
        description: "",
        descriptionImg:'',
        platformPayAmount:'',
        sellerPayAmount:'',
        realReasonsId:'',
        realReasonsName:''
      },
      rules:
      {
        realReasonsId:[
        { required: true, message: '请选择售后原因', trigger: 'blur' }
        ],
        platformPayAmount:[
        { required: true, message: '请输入应付金额', trigger: 'blur' },
          {validator:priceRule, trigger: 'blur'}
        ],
        sellerPayAmount:[
        { required: true, message: '请输入应付金额', trigger: 'blur' },
          {validator:priceRule, trigger: 'blur'}
        ],
      },
      // 上传相关
      imgShowList0: [],
      newImages0: [],
      imgFileList0: [],
      saleOrder:{},
      kefuImgs:[],
      dakuanImgs:[],
    };
  },
  created() { },
  methods: {
    open(id, flag) {
      this.ruleForm = {
        id: "",
        status: "",
        description: "",
        descriptionImg:'',
        platformPayAmount:'',
        sellerPayAmount:'',
        realReasonsId:'',
        realReasonsName:''
      };
      this.ruleForm.id = id
      this.getReasons()
      this.getAfterOrderInfo(id)
      this.dialogVisible = true;
  
    },
    // 获取售后订单详情
    getAfterOrderInfo(id){
      this.loading = true
      this.buyerImgs = []
      orderAfterApi.saleOrderInfoById(id,{dataType:'all'}).then(res=>{
        this.info = res.data
        if(this.info.afterImg){
          let imgs = []
          let arr = JSON.parse(this.info.afterImg)
          arr.forEach(r=>{
            imgs.push(r.url)
          })
          this.buyerImgs = imgs
        }
        if(this.info.descriptionImg){
          let imgs = []
          let arr = JSON.parse(this.info.descriptionImg)
          arr.forEach(r=>{
            imgs.push(r.url)
          })
          this.kefuImgs = imgs
        }
        if(this.info.remitImg){
          let imgs = []
          let arr = JSON.parse(this.info.remitImg)
          arr.forEach(r=>{
            imgs.push(r.url)
          })
          this.dakuanImgs = imgs
        }
        this.getSaleOrderInfo()
      })
    },
    // 获取销售订单详情
    getSaleOrderInfo(){
      let obj = {
        id:this.info.saleOrderId,dataType:'all',
        type:2
      }
      orderApi.orderPayStatusHandle(obj).then(res=>{
        this.saleOrder = res.data
        this.loading = false

      })
      
    },
    // 获取售后原因列表
    getReasons(){
      this.getDicts('realReasons').then(res=>{
      this.afterReasons = res.data
      if(res.data&&res.data.length){
        res.data.forEach(r=>{
          this.afterReasonsMap[r.dictCode] = r.dictLabel
        })
      }
    })
    },
    // 售后原因改变
    reasonChange(e){
      if(e){
        this.afterReasons.forEach(r=>{
          if(r.dictCode==e){
            this.ruleForm.realReasonsName = r.dictLabel
          }
        })
      }
      // this.ruleForm.afterReasonsName = this.commonMaps.afterReasonsMap[e]
    },
    afterAmountChange(e){

    },


     // 上传图片相关
    // 图片预览
    handlePictureCardPreview(file) {
      this.$viewerApi({
        images: [file.url],
      });
    },
    uploadNumber(file, fileList) {
      //限制图片数量
      this.$modal.msgError("最多只能上传9张图片");
    },
    // 图片上传成功
    handleUploadSuccess0(res, file, fileList) {
      if (res.code == 200) {
        // 取得新上传的文件
        this.newImages0 = fileList.filter((t) => {
          return t.url.indexOf("blob:") > -1;
        });
      }
    },
    // 图片删除
    handleRemove0(response) {
      const that = this;
      // 1.获取将要删除图片的临时路径
      const filePath = response.url;
      // 2.找到图片对应的索引值
      this.imgFileList0.forEach(function (element, key) {
        if (element.url === filePath) {
          that.imgFileList0.splice(key, 1); //回显的图片
        }
      });
      this.newImages0.forEach(function (element, key) {
        if (element.url === filePath) {
          that.newImages0.splice(key, 1); //新上传的图片
        }
      });
    },
    close(formName) {
      this.dialogVisible = false
    }
  }
};
</script>
<style scoped lang="scss">
.order-info {
  box-sizing: border-box;
  // height: 50px;
  background: #eee;
  padding: 15px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  line-height: 26px;

  >span {
    margin-right: 20px;
  }
}
.form-box{
  
  .sale-info{
    width: 100%;
    align-content: space-between;
    margin-top: 20px;
    >div{
      width: 50%;
      margin-right: 15px;
    }
  }
}





.zdy-des {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  margin: 6px 0;
}
</style>
